<template>
<div class="container">
  <h3>车辆详情列表</h3>
  <el-table :data="carsList" style="width: 100%">
    <el-table-column type="expand">
      <template slot-scope="props">
        <el-form label-position="left" inline class="demo-table-expand">
          <el-form-item label="车牌号">
            <span>{{ props.row.license }}</span>
          </el-form-item>
           <el-form-item label="图片">
            <image :src=" props.row.firstImages"></image>
          </el-form-item>
          <el-form-item label="品牌">
            <span>{{ props.row.brand }}</span>
          </el-form-item>
          <el-form-item label="车型">
            <span>{{ props.row.model }}</span>
          </el-form-item>
          <el-form-item label="分类">
            <span>{{ props.row.classify }}</span>
          </el-form-item>
          <el-form-item label="车主">
            <span>{{ props.row.userId.userName}}</span>
          </el-form-item>
          <el-form-item label="租赁价格(单位：￥/h)">
            <span>{{ props.row.price }}</span>
          </el-form-item>
           <el-form-item label="车辆所在地">
            <span>{{ props.row.location }}</span>
          </el-form-item>
           <el-form-item label="公里数(单位：km)">
            <span>{{ props.row.carCondition.kilometer }}</span>
          </el-form-item>
          <el-form-item label="年限">
            <span>{{ props.row.carCondition.years }}</span>
          </el-form-item>
           <el-form-item label="缴纳保险种类">
            <span>{{ props.row.carCondition.insurance }}</span>
          </el-form-item>
          <el-form-item label="是否通过年检">
            <span>{{ props.row.transCheck }}</span>
          </el-form-item>
          <el-form-item label="状态">
            <span>{{ props.row.transStatus }}</span>
          </el-form-item>
          <el-form-item label="是否审核通过">
           <el-button type="primary" @click="handleCheckPass(props.row._id)" :disabled="props.row.isChanged">审核通过</el-button>
           <el-button type="warning" @click="handleCheckRefuse(props.row._id)" :disabled="props.row.isChanged">拒绝通过</el-button>
          </el-form-item>
        </el-form>
      </template>
    </el-table-column>
    <el-table-column label="车牌号" prop="license"></el-table-column>
    <el-table-column label="品牌" prop="brand"></el-table-column>
    <el-table-column label="车型" prop="model"></el-table-column>
    <el-table-column label="分类" prop="classify"></el-table-column>
    <el-table-column label="价格(单位：￥/h)" prop="price"></el-table-column>
    <el-table-column label="状态" prop="transStatus"></el-table-column>
  </el-table>
  <PageComponent class="page"></PageComponent>
</div>
  
</template>

<script>
import axios from "axios"
//引入状态机
import { createNamespacedHelpers } from "vuex";
const {
  mapState: mapStateCars,
  mapActions: mapActionsCars
} = createNamespacedHelpers("carModule");
//引入分页
import PageComponent from "./page"
export default {
  components:{
    PageComponent,
  },
  data() {
    return {
      selectedType: "brand",
      selectedValue: "",
    };
  },
  computed: {
    ...mapStateCars(["carsList", "reminder"])
  },
  mounted() {
    // this.userRemove()
    // this.userSearch()
    this.getCars();
  },
  methods: {
    ...mapActionsCars(["getCars","upDateStatus","userSearch","userRemove"]),
    handleCheckPass(_id){
      this.upDateStatus({_id,status:4})
    },
    handleCheckRefuse(_id){
        this.upDateStatus({_id,status:3})
    }
  }
};
</script>

<style lang="less" scoped>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.container{
  width: 100%;
  height: 87vh;
}
</style>